<template>
  <div class="client-dashboard">
    <h2>欢迎来到客户中心</h2>

    <section class="meeting-rooms-section">
      <h3>会议室概览</h3>
      <div class="filter-controls">
        <label for="roomTypeFilter">筛选会议室类型:</label>
        <select id="roomTypeFilter" v-model="selectedRoomType">
          <option value="all">所有类型</option>
          <option value="1">教室</option>
          <option value="2">圆桌</option>
          <option value="3">董事会</option>
          <option value="4">多媒体</option>
        </select>
      </div>
      <div v-if="filteredMeetingRooms.length === 0" class="no-rooms">
        暂无可用会议室信息。
      </div>
      <ul v-else class="room-list">
        <li v-for="room in filteredMeetingRooms" :key="room.roomId" class="room-item">
          <h4>{{ room.roomname }} ({{ getRoomType(room.roomType) }})</h4>
          <p><strong>容纳人数:</strong> {{ room.capacity }}人</p>
          <p><strong>配置:</strong>
            <span v-if="room.projector === 1">投影仪正常</span>
            <span v-if="room.sound === 1">音响正常</span>
            <span v-if="room.internet === 1">网络正常</span>
            <span v-if="room.projector === 0 || room.sound === 0 || room.internet === 0"> (部分设备异常)</span>
          </p>
          <p><strong>租赁价格:</strong> ¥{{ room.price }}/小时</p>
          <p><strong>当前状态:</strong> {{ getRoomStatus(room.status) }}</p>
        </li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getAllRooms } from '@/apis/room';

const meetingRooms = ref([]);
const selectedRoomType = ref('all'); // 'all' for all types, or a number for specific type

const filteredMeetingRooms = computed(() => {
  if (selectedRoomType.value === 'all') {
    return meetingRooms.value;
  }
  return meetingRooms.value.filter(room => room.roomType === parseInt(selectedRoomType.value));
});

// Helper function to map room_type to readable string
const getRoomType = (type) => {
  switch (type) {
    case 1: return '教室';
    case 2: return '圆桌';
    case 3: return '董事会';
    case 4: return '多媒体';
    default: return '未知类型';
  }
};

// Helper function to map room status to readable string
const getRoomStatus = (status) => {
  switch (status) {
    case 0: return '未使用';
    case 1: return '使用中';
    default: return '未知状态';
  }
};

onMounted(async () => {
  try {
    const response = await getAllRooms();
    if (response.code === 200 && response.data) {
      meetingRooms.value = response.data;
    } else {
      console.error('Failed to fetch meeting rooms:', response.msg);
    }
  } catch (error) {
    console.error('Failed to fetch meeting rooms:', error);
  }
});
</script>

<style scoped>
.client-dashboard {
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 2rem;
}

.meeting-rooms-section {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h3 {
  color: #0056b3;
  margin-top: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

.no-rooms {
  color: #666;
  text-align: center;
  padding: 1rem;
  background-color: #e9e9e9;
  border-radius: 4px;
}

.room-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.room-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.room-item:hover {
  transform: translateY(-5px);
}

.room-item h4 {
  color: #1976d2;
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
}

.room-item p {
  margin: 0.4rem 0;
  color: #555;
  font-size: 0.9rem;
}

.room-item p strong {
  color: #333;
}

.filter-controls {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-controls label {
  font-weight: bold;
  color: #555;
}

.filter-controls select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #fff;
}

.filter-controls select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
</style>
